<template>
	<view class="con">
		<view class="bank" @click="show=true" v-if="type==1">
			<view class="zzz">
				<u-icon name="zhifubao-circle-fill" color="#2979ff" size="80"></u-icon>
				<text>支付宝</text>
			</view>
			<u-icon name="arrow-right" color="#999" size="28"></u-icon>
		</view>
		<view class="bank" @click="show=true" v-if="type==2">
			<view class="zzz">
				<u-icon name="weixin-fill" color="#07C160" size="80"></u-icon>
				<text>微信</text>
			</view>
			<u-icon name="arrow-right" color="#999" size="28"></u-icon>
		</view>
		<view class="kk">可支持微信或支付宝充值</view>
		<view class="b_box">
			<view class="title">充值金额</view>
			<view class="input-box">
				<input type="digit" v-model="money" placeholder="输入充值金额(单位:元)"
					placeholder-style="color:#999999;font-size: 26rpx" @input="testMoney" maxlength="10" />
			</view>
			<view class="btn" @click="$u.throttle(pay,1000)">
				确认充值
			</view>
		</view>
		<u-select v-model="show" :list="list" @confirm="change"></u-select>
	</view>
</template>

<script>
	import {
		chongzhi
	} from "../../../api/user.js"
	export default {
		data() {
			return {
				show: false,
				type: 1, //2微信，1支付宝，
				list: [{
						value: '2',  
						label: '微信'
					},
					{
						value: '1',
						label: '支付宝'
					}
				],
				money: "",
				flag: true
			}
		},
		methods: {

			// 检验输入
			testMoney(e) {
				let data = e.detail.value
				data= data.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符   
				data= data.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的   
				data= data.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				data= data.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数   
				if (data.indexOf(".") < 0 && data != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
					data = parseFloat(data);
				}
				setTimeout(() => {
					data=parseInt(data)
					if(isNaN(data)){
						data=''
					}
					this.money =data;
				},10)
			},
			change(e) {
				this.type = e[0].value
			},
			async pay(){
				console.log(1111)
				if(this.money.toString().trim()==""){
					this.msg("请输入金额","none")
					return;
				}
				uni.showLoading({
					title: "请稍后..."
				})
				let res = await this.get(chongzhi, {
					rechargeMoney: this.money,
					rechargeType: this.type
				})
				if (this.type == 2) {
					console.log("", JSON.stringify(res.data))
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: JSON.stringify(res.data), //微信订单数据
						success: (res) => {
							console.log('success:', res);
							this.msg("充值成功")
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						},
						fail: function(err) {
							console.log('fail:', err);
						}
					});
				} else if (this.type == 1) {
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.aliPayOrderStr, //支付宝订单数据
						success: (res) => {
							console.log('success:', res);
							this.msg("充值成功")
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						},
						fail: function(err) {
							console.log('fail:', err);
						}
					});
				}
			}
		}
	}
</script>

<style>
	.kk {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #333333;
		opacity: 1;
		margin-top: 40rpx;
		padding-left: 40rpx;
	}

	.zzz {
		display: flex;
		align-items: center;
	}

	.je {
		height: 37px;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
		opacity: 1;
		margin-top: 30rpx;
	}

	.pad {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #333333;
		opacity: 1;
	}

	.warp {
		display: flex;
		/* align-items: center; */
		justify-content: center;
		height: 100%;
		padding-top: 200rpx;
	}

	.rect {
		/* width: 500rpx; */
		height: 390rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}

	.b_num {
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #999999;
		opacity: 1;
		margin-top: 20rpx;
	}

	.b_title {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		opacity: 1;
	}

	.bank {
		display: flex;
		padding: 20rpx 30rpx;
		justify-content: space-between;
		border-bottom: 1px solid #DFDFDF;
		border-top: 1px solid #DFDFDF;
	}

	.all {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #5B6A91;
		opacity: 1;
		margin-left: 20rpx;
	}

	.yv {
		display: flex;
		align-items: center;
		height: 100rpx;
		font-size: 26rpx;
	}

	.input-box {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px #DFDFDF solid;
		font-size: 50rpx;
		font-weight: bold;
	}

	.title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
		opacity: 1;
	}

	.btn {
		width: 690rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 60rpx;
	}

	.con {
		background-color: #F6F6F6;
		min-height: 100vh;
		padding-top: 100rpx;
	}

	.b_box {
		width: 750rpx;
		height: 750rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 12rpx 12rpx 0px 0px;
		position: fixed;
		bottom: 0;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}
</style>
